<html>
    <head>
        <title>多个元素的过渡</title>
    </head>
    <body>
        <script>
            // 多个元素的过渡
                      /*
                            我们之后讨论 "多个组件的过渡"，对于原生标签可以使用　ｖ-if / v-else 。
                            最常见的"多标签过渡"是一个列表和描述这个列表为空消息的元素：


                                <transition>
                                    <table v-if="items.length>0">
                                        ......
                                    </table>
                                    <p v-else>无数据</p>
                                </transition>


                            可以这样使用，但是有一点需要注意：

                                当有"相同标签名"的元素切换时，需要通过　key attribute(标签属性)设置唯一的值来标记以让Vue区分它们，
                                否则Vue为了渲染效率，只会替换形同标签内部的内容。
                                即使在技术上没有必要， "给在<transition>组件中的多个元素设置key是一个更好的实践"

                                例如：
                                    <transition>
                                        <button v-if="isEditing" key="save">
                                            保存
                                        </button>
                                        <button v-else key="edit">
                                            编辑
                                        </>
                                    </transition>
                      */

                      //  在一些场景中，也可以通过给同一个元素的key 属性设置不同的状态来代替 v-if 和 v-else ，
                                // 上面的例子可以重写为：
                                /*
                                    <transition>
                                        <button v-bind:key="isEditing">
                                            {{ isEditing? '保存' : '编辑'}}
                                        </button>
                                    </transition>
                                */


                    // 使用多个 v-if 的多个元素的多度可以重写为绑定了动态 property 的单个元素过渡。
                                // eg:
                                /*
                                    <transition>
                                        <button v-if="docState==='saved'" key="saved">
                                            Edit
                                        </button>
                                        <button v-if="docState==='edited'" key="edited">
                                            Save
                                        </button>
                                        <button v-if="docState==='editing'" key="editing">
                                            Cancel
                                        </button>
                                    </transition>
                                */

                                // 可以重写为：
                                /*
                                    <transition>
                                        <button v-bind:key="docState">
                                            {{ buttonMessage}}
                                        </button>
                                    </transition>
                                */
                                // 组件实例中：
                                    computed:{
                                        buttonMessage:function(){
                                            let vm = this;
                                            switch (vm.docState){
                                                case 'saved': return 'Edit'
                                                case 'edited': return 'Save'
                                                case 'editing': return 'Cancel'
                                            }
                                        }
                                    }

                // ★、过渡模式
                            /*
                                    这里还有一个问题,看下面的例子：

                                        <transition>
                                            <button v-bind:key="docState">
                                                {{ buttonMessage}}
                                            </button>
                                        </transition>
                            */ 
                                        Vue.component('on-off',{
                                            data:function(){
                                                return {
                                                    docState: true 
                                                }
                                            },
                                            methods:{
                                                onOff:function(){
                                                    let vm = this;
                                                    vm.docState = !vm.docState;
                                                }
                                            },
                                            computed:{
                                                buttonMessage:function(){
                                                    let vm=this;
                                                    switch(vm.docState){
                                                        case true: return 'on'
                                                        case false:return 'off'
                                                    }
                                                }
                                            }
                                        })
                            /*
                                在"on"按钮和 "off"按钮的过渡中，连个按钮都被冲绘了，一个离开(leave)过渡的时候另一个进入(enter)过渡。
                                这是 <transition> 的默认行为 ----"enter 和 leave 同时发生"。


                                在元素绝对定位重合的时候运行正常。

                                然后，我们加上 translate 让它们像滑动过渡：
                            */

                            /*
                                ★、同时生效的"进入" 和 "离开" 不能满足所有要求，所以 Vue提供了"过渡模式"：

                                      1、in-out: 新元素先进行过渡，完成之后当前元素过渡离开。
                                      2、out-in: 当前元素先进行过渡，完成之后新元素过渡进入。

                            */
                            
                                        
                    

        </script>
    </body>
</html>